<app-content-header
  [search]="search"
>
  <ng-template #search>
    <app-search [(data)]="searchSchema" (bindSearch)="handleSearch()"></app-search>
  </ng-template>

</app-content-header>

<div class="cil-table-block">
  <st
    #st
    [scroll]="scroll"
    [data]="data"
    [columns]="columns"
    [widthMode]="{type: 'strict' }"
    [ps]="ps"
    [pi]="pi"
    [page]="stPage"
    [total]="total"
    [loading]="loading"
    (change)="onChange($event)"
  >
    <ng-template st-row="chargeBackTransCode" let-item>
      <span>{{ ChargeBackTransCodeMap[item.id.transCode] | translate }}</span>
    </ng-template>

    <ng-template st-row="transChannel" let-item>
      <span>{{ transChannelEnum[item.id.cardBrand] | translate }}</span>
    </ng-template>

    <ng-template st-row="transAmt" let-item>
      <span>{{ item.transAmt | amtFormat:item.transCurr | async }}</span>
    </ng-template>

    <ng-template st-row="status" let-item>
      <span>{{ ProcessFlagMap[item.processFlag] | translate }}</span>
    </ng-template>
</st>

<div *ngIf="!loading" #btns class="cil-custom-btns">
  <button
    acl [acl-ability]="'api.get.camel.stores.report'"
    class="cil__custom-btn__lightblue"
    nz-button
    nzType="primary"
    nzShape="round"
    nzSize="default"
    (click)="download()"
  >
    <i nz-icon type="download"></i>
    {{'BTN.EXPORT' | i18n}}
  </button>
</div>

<ng-template #insTpl>
  <app-aams-select
    level="institution"
    [(ngModel)]="selectedAcquirer"
    [disabled]="isAcquirerUser"
  ></app-aams-select>
</ng-template>

<ng-template #agentTpl>
  <app-aams-select
    level="agent"
    [insCode]="selectedAcquirer ? selectedAcquirer.code : ''"
    [(ngModel)]="selectedGroup"
    [disabled]="isAgentUser"
  ></app-aams-select>
</ng-template>

<ng-template #merchantTpl>
  <app-aams-select
    level="merchant"
    [insCode]="selectedAcquirer ? selectedAcquirer.code : ''"
    [agentCode]="selectedGroup ? selectedGroup.code : ''"
    [(ngModel)]="selectedMerchant"
    [disabled]="isMerchantUser"
  ></app-aams-select>
</ng-template>

<ng-template #storeTpl>
  <app-aams-select
    level="store"
    [insCode]="selectedAcquirer ? selectedAcquirer.code : ''"
    [agentCode]="selectedGroup ? selectedGroup.code : ''"
    [intMerCode]="selectedMerchant ? selectedMerchant.code : ''"
    [(ngModel)]="selectedStore"
    [disabled]="isStoreUser"
  ></app-aams-select>
</ng-template>

<ng-template #transAmt>
  <nz-input-group>
    <div nz-col nzSpan="10">
      <nz-input-number 
        [style.width]="'100%'" 
        [ngModel]="chargeAmtFrom" 
        (ngModelChange)="chargeAmtFrom=$event;validateTransAmt()" 
        [nzMin]="0"
        [nzPrecision]='0' >
      </nz-input-number>
    </div>
    <div nz-col nzSpan="4" class="cil__trans-amt-split">
      <div>——</div>
    </div>
    <div nz-col nzSpan="10">
      <nz-input-number 
        [style.width]="'100%'" 
        [ngModel]="chargeAmtTo" 
        (ngModelChange)="chargeAmtTo=$event;validateTransAmt()" 
        [nzMin]="0" 
        [nzPrecision]='0'>
      </nz-input-number>
    </div>
  </nz-input-group>
</ng-template>

<ng-template #tplCurrency>
  <app-currency-select [(ngModel)]="selectedCurrency"></app-currency-select>
</ng-template>
